<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>流光/扫光效果</title>
<style>
:root {
	--stream-effect-width: 25em;
	--stream-effect-height: 10em;
	--stream-mask-width: 25%;
	--stream-mask-skew-deg: 45deg;
	--stream-mask-skew-y: var(--stream-effect-height);
}
.stream-effect {
	width: var(--stream-effect-width);
	height: var(--stream-effect-height);
	position: relative;
	background-size: 100% 100%;
}
.stream-effect::after {
	content: '';
	position: absolute;
	width: var(--stream-mask-width);
	height: 100%;
	background-image: linear-gradient(90deg, #fff5, #fffB, #fff5);
	transform-origin: left top;
	transform: skewx(-45deg);
	transition: left 1s ease;
	left: calc(var(--stream-mask-width) * -1);
}
/* 注意hover的位置（必须挂在实际元素上）！伪元素不是一个实际存在的DOM元素，所以它只有属性没有状态 */
.stream-effect:hover::after{
	left: calc(100% + var(--stream-mask-skew-y))
}
</style>
</head>
<body>
<div class="stream-effect" style="background-image: url(https://via.placeholder.com/400x160)"></div>
<div class="stream-effect" style="background-image: url(https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75)"></div>
</body>
</html>
